<template>
  <div>
    <el-select :size="size" v-model="value" style="display: block;" filterable remote reserve-keyword clearable @clear="changeValue"
               @change="changeValue" placeholder="选择集群" :remote-method="remoteMethod" :loading="loading">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
  </div>
</template>

<script>
import {getRecords, isNotNull} from "@/util/common-util";
import {getPage} from "@/api/business/filling-cluster";

export default {
  name: "filling-cluster-select",
  props: {
    initValue: {
      type: Object,
      default: null
    },
    size: {
      type: String,
      default: 'small'
    },
  },
  data() {
    return {
      loading: false,
      options: [],
      search: {
        teamId: '',
        queryWord: ''
      },
      value: ''
    }
  },
  created() {
    this.initOptions(() => {
      if (isNotNull(this.initValue)) {
        this.value = this.initValue
      }
    })
  },
  methods: {
    remoteMethod(query) {
      this.search.queryStr = query
      this.initOptions()
    },
    initOptions(success) {
      this.options = []
      this.loading = true
      getPage({current: 1, size: 10}, this.search).then(res => {
        this.data = getRecords(res)
        for (const item of this.data) {
          this.options.push({label: item.clusterName, value: item.id})
        }
        this.loading = false
        success && success()
      }).catch(() => {
        this.loading = false
      })
    },
    changeValue() {
      this.$emit('change', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
